<!--
 * @Author: 刘十三
 * @Date: 2024-01-02 10:23:22
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-03-14 15:23:02
 * @FilePath: \FJ-dev-1.3.1\dev\pages\query\specialArea\components\specialAreaBaseInfo.vue
 * @Description: 特殊区域详情-基本信息组件
-->

<template>
  <view class="content-info">
    <u-row gutter="16" align="top" class="divided-line">
      <u-col span="12">
        <view class="msg-title">
          区域名称
        </view>
        <view class="msg-context">
          {{ info.areaName || "/" }}
        </view>
      </u-col>
    </u-row>
    <u-row gutter="16" align="top" class="divided-line">
      <u-col span="7">
        <view class="msg-title">
          区域类别
        </view>
        <view class="msg-context">
          {{ info.typeName || "/" }}
        </view>
      </u-col>
      <u-col span="5">
        <view class="msg-title">
          状态
        </view>
        <view class="msg-context">
          {{ info.isActiveName || "/" }}
        </view>
      </u-col>
    </u-row>
    <u-row gutter="16" align="top" class="divided-line">
      <u-col span="7">
        <view class="msg-title">
          负责人
        </view>
        <view class="msg-context">
          {{ info.manager || "/" }}
        </view>
      </u-col>
      <u-col span="5">
        <view class="msg-title">
          联系电话
        </view>
        <view class="msg-context">
          {{ info.telephone || "/" }}
        </view>
      </u-col>
    </u-row>
    <u-row gutter="16" align="top" class="divided-line">
      <u-col span="7">
        <view class="msg-title">
          经纬度
        </view>
        <view class="msg-context">
          {{ info.coordinate || "/" }}
        </view>
      </u-col>
      <u-col span="5">
        <view class="msg-title">
          排序号
        </view>
        <view class="msg-context">
          {{ info.seq || "/" }}
        </view>
      </u-col>
    </u-row>
    <u-row gutter="16" align="center" @tap="navigationClick">
      <u-col span="10">
        <view class="msg-title">
          地址
        </view>
        <view class="msg-context">
          {{ info.address || "/" }}
        </view>
      </u-col>
      <u-col span="1.8" v-if="info.isActive == 1">
        <u-image width="64rpx" height="64rpx" :src="src" style="margin-left: auto"></u-image>
      </u-col>
    </u-row>
  </view>
</template>
<script>
export default {
  name: "baseInfo",
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      src: "/static/certificate/Navigation.png",
    };
  },
  methods: {
    navigationClick() {
      if (this.info.isActive != 1) {
        return false;
      }
      if (!this.info.longitude || !this.info.latitude) {
        this.$u.toast("该零售户未采集坐标，无法导航");
        return;
      }
      // #ifdef H5-ONLY
      let parmas = {
        longitude: this.info.longitude,
        latitude: this.info.latitude,
        address: this.info.areaName,
      };
      this.setRouteParam(parmas);
      this.$u.route("/pages/commonPage/mapNavigatorComponent");
      // #endif

      // #ifndef H5-ONLY
      this.$deviceApi.navigateMap(this.info.latitude, this.info.longitude, this.info.areaName);
      // #endif
    },
  },
};
</script>
<style lang="scss" scoped>
.content-info {
  overflow: hidden;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  .msg-title {
    font-size: $cm_form_item_label_font_size;
    color: #717579;
    display: inline;
  }
  .msg-context {
    font-size: $cm_form_item_label_font_size;
    padding: 20rpx 0rpx;
    word-break: break-all;
  }
  .divided-line {
    margin: 0px 0px 20rpx 0px;
  }
  .divided-line::after {
    border-bottom: 2rpx solid #cccccc;
    content: "";
    width: 100%;
    opacity: 0.5;
    display: block;
  }
}
</style>
